<!DOCTYPE html>
<html>

<header>
<title>Not rendered</title>
</header>

<body style="margin: 0;">
  <h1>Top of Document</h1>
  <canvas width="1000" height="10000"></canvas>
  <h1>Bottom of Document</h1>
</body>

<script>
// Render a red and blue checkerboard this ensures the render test checks for
// any stretching or misalignment.
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

context.fillStyle = 'rgba(255, 0, 0, 1.0)';
for(let i = 0; i < canvas.width; i += 400) {
  for(let j = 0; j < canvas.height; j += 400) {
    context.fillRect(i, j, 200, 200);
  }
}
context.fillStyle = 'rgba(0, 0, 255, 1.0)';
for(let i = 200; i < canvas.width; i += 400) {
  for(let j = 200; j < canvas.height; j += 400) {
    context.fillRect(i, j, 200, 200);
  }
}

// Indicate the content is now rendered for capture.
document.title = 'rendered';
</script>
</html>

